<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>2D变形-transform</title>
		<!-- 
			transform属性，只对block级属性有效
			
			旋转rotate
			平移translate
			倾斜skew
			缩放scale
			
			基点变换transform-origin
			
			了解：
			矩阵matrix：旋转，平移，倾斜，缩放
			对于某一元素应用旋转变换transform（x,y）,相当于对其应用如下变换矩阵
			1 0 X
			0 1 Y
			0 0 1
			
			语法：
			trasform:matrix(a,b,c,d,e,f)对应元素的变换矩阵
			a c e
			b d f
			0 0 1
			点(x,y,1)进行变换后的新坐标
			a c e   x    ax+cy+e
			b d f   y  = bx+dy+f
			0 0 1   1       1
			变换之后点(x,y)的坐标是(ax+cy+e,bx+dy+f)
		 -->
		 <style type="text/css">
			 /* 禁用掉系统滚动条 */
			 html{
				 overflow: hidden;
				 height: 100%;
			 }
			 
		 	.box{
				width: 100px;
				height: 100px;
				background: url(exercise/img/item/sub_img3.png) no-repeat;
				
				position: absolute;
				top: 0;
				bottom: 0;
				left: 0;
				right: 0;
				margin: auto;
				
				transition: 2s;
				transform-origin:top left;
			}
			
			.box:hover{
				/* transform: matrix(1.0, 2.0, 3.0, 4.0, 5.0, 6.0); */
				/* transform: translate(12px, 50%); */
				/* transform: translateX(2em); */
				/* transform: translateY(3in); */
				/* transform: scale(2, 0.5); */
				/* transform: scaleX(2); */
				/* transform: scaleY(0.5); */
				/* transform: rotate(0.5turn); */
				/* transform: skew(30deg, 20deg); */
				/* transform: skewX(30deg); */
				/* transform: skewY(1.07rad); */
				/* transform: matrix3d(1.0, 2.0, 3.0, 4.0, 5.0, 6.0, 7.0, 8.0, 9.0, 10.0, 11.0, 12.0, 13.0, 14.0, 15.0, 16.0); */
				/* transform: translate3d(12px, 50%, 3em); */
				/* transform: translateZ(2px); */
				/* transform: scale3d(2.5, 1.2, 0.3); */
				/* transform: scaleZ(0.3); */
				/* transform: rotate3d(1, 2.0, 3.0, 10deg); */
				/* transform: rotateX(10deg); */
				/* transform: rotateY(10deg); */
				/* transform: rotateZ(10deg); */
				/* transform: perspective(17px); */
				
				/* 变换组合*/
				transform: translateX(10px) rotate(10deg) translateY(5px);
			}
		 </style>
	</head>
	<body>
		<div class="box"></div>
	</body>
</html>
